<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>

<head>
<%@ include file="../commoms/link.txt"%>
<meta name="description" content="Log">
<link rel="stylesheet" href="assets/css/jquery.motionCaptcha.0.2.css">
<script src="assets/js/jquery.motionCaptcha.0.2.js"></script>
<style>
.header {
	text-align: center;
}

.header h1 {
	font-size: 200%;
	color: #333;
	margin-top: 30px;
}

.header p {
	font-size: 14px;
}

.get {
	text-align: center;
	padding: 100px 0;
}
</style>
</head>

<body>
	<header class="am-topbar am-topbar-fixed-top">
		<div class="am-container">
			<h1 class="am-topbar-brand">
				<a href="Index.jsp">阿拉丁</a>
			</h1>
		</div>
	</header>
	<div class="get">
		<div class="am-g">
			<div class="am-u-lg-3 am-padding-vertical-lg am-u-lg-offset-7"
				style="border-style: solid; border-width: medium">
				<ul class="am-nav am-nav-pills am-nav-justify">
					<li class="am-active"><a href="./Login.jsp">用户登录</a></li>
					<li><a href="./Register.jsp">免费注册</a></li>
				</ul>
				<hr>


				<form method="post" action="#" class="am-form"
					id="Loginformtooltip" data-am-validator>
					<fieldset>
						<div class="am-form-group am-form-icon">
							<i class="am-icon-user"></i> <input type="text"
								name="PhoneNumber" id="PhoneNumber" maxlength="11"
								class="am-form-field" placeholder="请使用手机号码注册"
								pattern="1[0-9]{10}" data-foolish-msg="请输入正确的手机号码" required />

						</div>
						<div class="am-form-group am-form-icon">
							<i class="am-icon-lock"></i> <input type="password"
								name="Password" id="Password" class="am-form-field"
								placeholder="请输入登陆密码" maxlength="20"
								pattern="[a-z|A-Z|0-9]{6,20}" data-foolish-msg="请输入密码数字加字母"
								required />
						</div>
	                   <div class="am-g">
	                   <div class="am-u-lg-5 am-u-lg-centered ">
						<label for="remember-me"> <input id="remember-me"
							name="remember-me" type="checkbox"> 记住密码
						</label> 
						</div>
						</div>
						<br />
						 <div class="am-g">
                     <input
								type="button"  id="btnOK" name="submit" value="登 录"
								class="am-btn am-btn-primary am-btn-sm am-u-lg-5">
							<input type="button" name="" value="忘记密码 ^_^? "
								class="am-btn am-btn-default am-btn-sm am-u-lg-5"> 
						</div>
						
					</fieldset>
				</form>
			
			</div>
				       <div id="mc" >
							
							<canvas id="mc-canvas"></canvas>
							<input type="hidden" id="mc-action" value="javascript:submit()" />
						</div>
		</div>
	</div>




	<%@ include file="../commoms/alert.txt"%>
</body>
<script type="text/javascript">
<%session.invalidate(); %>
	var phoneNum = getCookie('phoneNum');
	var password = getCookie('password');
	var $form = $('#Loginformtooltip');
    var times=0;

	if (phoneNum != null && password != null) {
		$('#remember-me').attr('checked', 'checked');
		$('#PhoneNumber').val(phoneNum)
		$('#Password').val(password);
	}
	setFormValidate($form);

	function submit() {
var PhoneNumber = $("#PhoneNumber").val();
		var Password = $("#Password").val();
		var regPhoneNumber = /1[0-9]{10}/;
		var regPassword = /[a-z|A-Z|0-9]{6,20}/;
		if (!regPhoneNumber.test(PhoneNumber) || !regPassword.test(Password)) {
			$form.submit();
			return false;
		} else {
			myAjax(domain + "/Login.do", {
				"PhoneNumber" : PhoneNumber,
				"Password" : Password
			}, function(data) {
				if (data.state == 'success') {
					window.location.href = "EEIndex.jsp";
				} else {
					times++;
					if (data.error_description == 'password wrong') {

						myAlert('警告', '密码错误!!!');
						$("#Password").focus();

					} else if (data.error_description =='no user') {
						myAlert('警告', '没有这个用户!!!');
 
						$("#PhoneNumber").focus();
					}
					if(times>=3)
					{
				  if(times==3)
					  $('#mc').prepend('<p>Please draw the shape in the box to submit the form:</p>');
					
					$('#btnOK').attr('type','submit');
					$('#btnOK').prop('disabled','disabled');
						
					$form.motionCaptcha();
						}
				}
			});
			
		}

	}
	$('#remember-me').click(function(){
		
		if ($('#remember-me').is(':checked')) {
			var days = 7;
			var exp = new Date();
			exp.setTime(exp.getTime() + days * 60 * 1000 * 60 * 24);
			document.cookie = "phoneNum=" + $('#PhoneNumber').val()
					+ ";expires=" + exp.toGMTString();
			document.cookie = "password=" + $('#Password').val()
					+ ";expires=" + exp.toGMTString();

		} else {
		
			var exp = new Date();
			 document.cookie = "password=" + $('#Password').val()
					+ ";expires=" + exp.toGMTString();
			$("#Password").val('');

		}
		
	});
	$('#btnOK').click(
			function() {
			
				if(times<3)
					submit();
			});
	
</script>
</html>
